<template>
  <div class="heroranking-container titlebar-page">
    <TitleBar>
      <div class="title-wrapper" slot="rest">本周{{thisWeek}}英雄排行</div>
    </TitleBar>
    <div class="filters-wrapper">
      <div class="type" @click="toggleFilterPanel">
        <div class="name">{{filterName}}</div>
        <div class="selectors" v-show="showFilterPanel">
          <ul>
            <li
              @click="changeFilterType(item)"
              v-for="(item, i) of filterList"
              :key="i"
              :class="{selected: filterSelected === i}"
            >{{item.text}}</li>
          </ul>
        </div>
      </div>
      <div class="win" :class="{selected: sortType === 1}" @click="changeSortType(1)">胜率</div>
      <div class="apperance" :class="{selected: sortType === 2}" @click="changeSortType(2)">出场率</div>
    </div>
    <div class="hero-list-wrapper">
      <ul class="hero-list">
        <li v-for="(item, i) of filterHeroList" :key="i">
          <div class="ranking">
            <hexagon-slice-six-icon :style="{color: colors[i] || 'grey'}" :size="36"></hexagon-slice-six-icon>
            <span class="rank-index">{{i + 1}}</span>
          </div>
          <div class="headUrl">
            <x-img :default-src="require('../../assets/images/default-card.png')"  :src="item.headUrl" alt srcset />
          </div>
          <div class="info">
            <div class="name">{{item.realName}}</div>
            <div class="type">{{item.heroType | HeroType}}</div>
          </div>
          <div class="graph">
            <div class="percent" :class="'rank' + (i + 1)">{{parseInt(item.win)}}%</div>
            <div class="progress">
              <svg width="100%" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <defs>
                  <linearGradient v-if="i === 0" id="rank1" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" style="stop-color:rgb(193,65,40);stop-opacity:1"></stop>
                    <stop offset="100%" style="stop-color:rgb(239,83,80);stop-opacity:0.8"></stop>
                  </linearGradient>
                  <linearGradient v-if="i === 1" id="rank2" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" style="stop-color:rgb(188,201,39);stop-opacity:1"></stop>
                    <stop offset="100%" style="stop-color:rgb(179,183,97);stop-opacity:0.8"></stop>
                  </linearGradient>
                  <linearGradient v-if="i === 2" id="rank3" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" style="stop-color:rgb(20,168,178);stop-opacity:1"></stop>
                    <stop offset="100%" style="stop-color:rgb(85,149,154);stop-opacity:0.8"></stop>
                  </linearGradient>
                </defs>
                <rect x="0" y="1" width="100" height="10" style="fill:#cfcfcf"></rect>
                <rect
                  x="0"
                  y="1"
                  :width="parseInt(item.win)"
                  height="10"
                  :style="`fill:url(#rank${ i + 1})`"
                  v-if="i < 3"
                ></rect>
                <rect x="0" y="1" :width="parseInt(item.win)" height="10" style="fill:#adadad" v-else></rect>
              </svg></div>
          </div>
          <div class="show-percent" :class="'rank' + (i + 1)">
            <span>{{item.show}}%</span>
          </div>
        </li>
      </ul>
    </div>
    <!--     {
        "id": 1,
        "realName": "猪八戒",
        "nickname": "无忧猛士",
        "heroType": 1,
        "amount": null,
        "win": 72,
        "show": 56,
        "headUrl": "https://c-c.shuaishuaiup.com/minigame/images/hero/猪八戒 (2).jpg",
        "pictureUrl": "https://c-c.shuaishuaiup.com/minigame/images/hero/猪八戒-banner.jpg",
        "cardUrl": "https://c-c.shuaishuaiup.com/minigame/images/hero/猪八戒.jpg"
    }, -->
  </div>
</template>

<script>
import TitleBar from "../../components/TitleBar";
import { colors } from "../../utils/theme";
// import { hero } from "../../requests";
import { XImg } from 'vux';
import HeroList from './rank.json';
export default {
  data() {
    return {
      colors,
      tabSelected: 0,
      heroList: [
        {
          heroUrl:
            "https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg",
          realName: "马超",
          heroType: "战士"
        }
      ],
      thisWeek: "",
      filterName: "全部英雄",
      filterList: [
        {
          text: "全部英雄",
          value: 0
        },
        {
          text: "坦克",
          value: 1
        },
        {
          text: "战士",
          value: 2
        },
        {
          text: "刺客",
          value: 3
        },
        {
          text: "法师",
          value: 4
        },
        {
          text: "射手",
          value: 5
        },
        {
          text: "辅助",
          value: 6
        }
      ],
      filterSelected: 0,
      sortType: 1,
      showFilterPanel: false,
      colors: ["rgb(193,65,40)", "rgb(188,201,39)", "rgb(20,168,178)"]
    };
  },
  computed: {
    filterHeroList() {
      let filtered = this.heroList.filter(item => {
        if (this.filterSelected === 0) {
          return true;
        }
        return item.heroType === this.filterSelected;
      });
      let sorted = this.sortType === 1 ? 'win' : 'show';
      let sort = _.sortBy(filtered, (a)=>{
        return a[sorted]
      })
      return sort.reverse();
    }
  },
  mounted() {
    this.thisWeek = this.getThisWeek();
    this.heroList = _.cloneDeep(HeroList);
    this.heroList.sort((a, b)=>{
    })
  },
  methods: {
    getThisWeek() {
      let date = new Date();
      let w = date.getDay();
      let mm = date.getTime();
      let day = 24 * 60 * 60 * 1000;
      let start = new Date(mm - (w - 1) * day);
      let end = new Date(mm + (7 - w) * day);

      return `${start.getMonth() + 1}.${start.getDate()} - ${end.getMonth() +
        1}.${end.getDate()}`;
      // console.log(mm - (w * day), mm + ((7 - w) * day));
    },
    changeFilterType(item) {
      this.filterSelected = item.value;
    },
    // 胜率1 或 出场率2
    changeSortType(type) {
      this.sortType = type;
    },
    toggleFilterPanel() {
      this.showFilterPanel = !this.showFilterPanel;
    },
    // http请求
    getHeroList() {
      // hero.getHeroList.r({}).then(({ data }) => {
      //   this.heroList = data.data.dataList;
      //   console.log("getHeroList", data);
      // });

    }
  },
  components: {
    TitleBar,
    XImg
  }
};
</script>

<style lang="less" scoped>
.heroranking-container {
  width: 100%;
  height: 100%;
  // overflow-y: scroll;
  .title-wrapper {
    width: 100%;
    text-align: center;
    color: white;
    font-size: 0.92rem;
    z-index: 999;
  }

  .filters-wrapper {
    height: 2rem;
    background: #040509;
    width: 100%;
    color: white;
    display: flex;
    position: fixed;
    top: 36px;
    z-index: 9999;
    .type {
      flex: 5;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .name {
        font-size: 0.9rem;
        padding-left: 0.4rem;
      }
      .selectors {
        position: absolute;
        top: 36px;
        width: 100%;
        height: 5rem;
        background: #040509;
        ul {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          flex-wrap: wrap;
          li {
            flex-basis: 30%;
            margin-left: 2%;
            height: 1.2rem;
            line-height: 1.2rem;
            border: 1px solid #14a8b2;
            color: white;
            font-size: 0.7rem;
            text-align: center;
            &.selected {
              color: #14a8b2;
            }
          }
        }
      }
    }
    .win,
    .apperance {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex: 2;
        font-size: 0.8rem;
      &.selected {
        color: #14a8b2;
      }
    }

    .apperance {
      flex: 2;
    }
  }

  .hero-list-wrapper {
    margin-top: 36px;
    .hero-list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      height: 4rem;
      li {
        flex: 1;
        flex-basis: 100%;
        display: flex;
        border-bottom: 1px solid #eaeaea;
        
        .ranking {
          display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
          flex-basis: 10%;
          .rank-index {
            position: absolute;
            font-size: 0.8rem;
            color: white;
          }
        }
        .headUrl {
          flex-basis: 20%;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 3rem;
            height: 3rem;
          }
        }
        .info {
          flex-basis: 20%;
          .name {
            font-size: 0.9rem;
          }
          .type {
            font-size: 0.8rem;
          }
        }
        .graph {
          flex-basis: 30%;
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;
          z-index: -1;
          .percent {
            font-size: 0.84rem;
            flex: 1;
            position: relative;
            top: 10px;
          }
          .progress {
            flex: 1;
            position: relative;
            bottom: 6px;
          }
        }
        .show-percent {
          flex-basis: 20%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 0.82rem;
        }

        div[class~="rank"] {
          color: #7f7f7f;
        }

        .rank1 {
          color: rgb(193, 65, 40);
        }
        .rank2 {
          color: rgb(188, 201, 39);
        }
        .rank3 {
          color: rgb(20, 168, 178);
        }
      }
    }
  }
}
</style>
